<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <span>评价管理</span>
            </div>
        </template>
        <el-row :gutter="14">
            <el-col :span="5">
                <el-input placeholder="请输入用户名称" v-model="searchContent"></el-input>
            </el-col>
            <el-col :span="5">
                <el-input placeholder="请输入评价内容" v-model="searchComment"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" size="small" @click="commentSearch">搜索</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column width="60" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户" width="100">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="评价内容" width="200">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.title }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品" width="250">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.gname }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="commentDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="changePage"
        ></el-pagination>
    </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import axios from 'axios'
import { ElMessageBox, ElNotification } from "element-plus";

// 读取页面数据
function loadData(state) {
    const params = {
        pageCurrent: state.currentPage,
        pageSize: state.pageSize,
        name: state.searchContent,
        title: state.searchComment,

    }
    axios({
        url: '/getAllMessageOffset',
        method: 'get',
        params: params,
    }).then(res => {
        // console.log(res.data.data)
        state.tableData = res.data.data.list;
        state.total = res.data.data.total // 总的记录数
    });
}


// 删除评论
function useCommentDelete(state) {
    const commentDelete = (id) => {
        // console.log('index=',index)
        console.log('id=', id)
        ElMessageBox.confirm("是否确认删除该评论？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            callback: (action) => {
                if (action == 'confirm') {
                    axios({
                        url: '/deleteMessageById',
                        method: 'get',
                        params: {
                            id: id
                        }
                    }).then(res => {
                        // console.log(res)
                        if (res.data.code == 200) {
                            ElNotification({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                            loadData(state)
                        } else {
                            ElNotification({
                                title: "失败",
                                message: "删除失败",
                                type: "error",
                                duration: 2000,
                            });
                        }
                    });
                }
            },
        });
    }
    return {
        commentDelete
    }
}

// 搜索评论
function useCommentSearch(state) {
    const commentSearch = () => {
        state.currentPage = 1;
        const params = {
            pageCurrent: state.currentPage,
            pageSize: state.pageSize,
            name: state.searchContent,
            title: state.searchComment,
        }
        axios({
            url: '/selectMessageByUnameAndTitleOffset',
            method: 'get',
            params: params
        }).then(res => {
            // console.log(res.data)
            if (res.data.code == 200) {
                state.tableData = res.data.data.list
                state.total = res.data.data.total
            } else {
                state.tableData = [];
                ElNotification({
                    title: "失败",
                    message: "查无此信息",
                    type: "error",
                    duration: 2000,
                });
            }


        });
    };
    return {
        commentSearch,
    }
}


export default {
    setup() {
        const state = reactive({
            tableData: [],
            total: 0,
            currentPage: 1,     // 当前页码
            pageSize: 6,
            searchContent: "",
            searchComment: "",
        });

        onMounted(() => {
            loadData(state);
        });
        // 分页-页面切换的时候执行该方法
        const changePage = (val) => {
            state.currentPage = val;
            loadData(state);
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
        };

        return {
            ...toRefs(state), //...解构结构后不是响应式对象。toRefs数据转换成响应式对象
            ...useCommentSearch(state),
            ...useCommentDelete(state),
            changePage,
        };
    },
    methods: {
        // 序号-自动递增
        indexMethod(index) {
            return index = index + 1;
        }
    },
};
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>